<template>
  <cube-page type="button-view" :title="projectInfo.name">
    <div slot="content">
      <div class="zuipagesubWrap" :style="{'minHeight': getlistHeight}">
        <div class="zcontent">
          <div class="zui-flex ztableWrap">
            <!--
            <div class="J_left">
              <div class="zui-flex J_row">
                <div class="J_col w1">项目期数</div>
              </div>
              <div class="zui-flex J_row" v-for="(item, index) in tableData" :key="index">
                <div class="J_col w1">{{item.periods}}</div>
              </div>
            </div> -->
            <cube-scroll
              ref="scroll"
              :data="tableData"
              direction="horizontal"
              class="horizontal-scroll-list-wrap">
              <div class="J_right">
                <div class="zui-flex J_row">
                   <div class="J_col w1">项目期数</div>
                  <div class="J_col w1">客户编码</div>
                  <div class="J_col w2">医院</div>
                  <div class="J_col w1">状态</div>
                  <div class="J_col w3">操作</div>
                  <div class="J_col w2">联系人</div>
                  <div class="J_col w2">联系电话</div>
                  <div class="J_col">物料号</div>
                  <div class="J_col w4">物料名称</div>
                  <div class="J_col w3">规格</div>
                  <div class="J_col w2">区域</div>
                  <div class="J_col">第一次进货时间</div>
                  <div class="J_col">数量</div>
                  <div class="J_col">第二次进货时间</div>
                  <div class="J_col">数量</div>
                </div>
                <div class="zui-flex J_row" v-for="(item, index) in tableData" :key="index">
                  <div class="J_col w1">{{item.periods}}</div>
                  <div class="J_col w1">{{item.code}}</div>
                  <div class="J_col w2">{{item.hospital}}</div>
                  <div class="J_col w1">
                    <span v-if="item.status == -1" class="zui_new">待处理</span>
                    <span v-if="item.status == 1" class="zui_done">已接收</span>
                    <span v-if="item.status == 0" class="zui_undo">已拒绝</span>
                  </div>
                  <div class="zui-flex J_col w3" style="align-items: center;">
                    <template v-if="item.status == -1">
                      <cube-button class="zbtn zbtn1" @click="receive(item, index, 1)">接收</cube-button>
                      <cube-button class="zbtn zbtn2" @click="receive(item, index, 0)">拒绝</cube-button>
                      <cube-button class="zbtn zbtn3" @click="zupload(item, index)">上传证据</cube-button>
                    </template>
                    <template v-else>
                      <cube-button class="zbtn zbtn3" style="flex: 1;" @click="zupload(item, index)">上传证据</cube-button>
                    </template>
                  </div>
                  <div class="J_col w2">{{item.linkperson}}</div>
                  <div class="J_col w2"><a class="tel" :href="'tel:'+item.linkphone">{{item.linkphone}}</a></div>
                  <div class="J_col">{{item.wuliaocode}}</div>
                  <div class="J_col w4">{{item.wuliaoname}}</div>
                  <div class="J_col w3">{{item.specifications}}</div>
                  <div class="J_col w2">{{item.area}}</div>
                  <div class="J_col">{{item.firstdate}}</div>
                  <div class="J_col">{{item.firstnum}}</div>
                  <div class="J_col">{{item.seconddate}}</div>
                  <div class="J_col">{{item.secondnum}}</div>
                </div>
              </div>
            </cube-scroll>
          </div>
        </div>
      </div>

      <cube-view></cube-view>
    </div>
  </cube-page>
</template>

<script>
import {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} from 'vuex'

import CubePage from '@/components/cube-page'
import CubeView from '@/components/cube-view'
import Drawer from '@/components/drawer'
import {zProjectdetail, zProjectdetailRec} from '@/util/api';

export default {
  name: 'Projectdetail',
  components: {
    CubeView,
    CubePage
  },
  computed: {
    ...mapState(['loginUserInfo']),
  },
  data () {
    return {
      showLoading: true,
      tableData: [],
      getlistHeight: this.zutil.getlistHeight(44),
      summary: '',
      projectInfo: {
        id: '',
        depart: ''
      },
      showIntroFlag: false,
      items: []
    }
  },
  created () {

  },
  mounted() {
    let projectInfo = this.zutil.lStorage.getParam('lst_projectBaseInfo');
    console.info(projectInfo);
    if(projectInfo){

      this.projectInfo = JSON.parse(projectInfo);
      this.fetchList();
    }else{
      this.$createToast({type: 'error', time: 1000, txt: "未获取到项目id！"}).show();
      setTimeout(()=>{
        this.$router.back();
      }, 1000)
    }
  },
  watch: {

  },
  methods: {
    ...mapMutations(['setW_shortageData']),
    async fetchList () {

      const zuiCubeLoading = this.$createToast({time: 0,txt: '正在加载中...'});
      zuiCubeLoading.show();
      let res = await zProjectdetail({id: this.projectInfo.id,code:this.projectInfo.name});
      res = this.zutil.formatAxiosData(res);
      zuiCubeLoading.hide();
      if(res.code == '0000'){
        this.tableData = res.data.list;
      }else{
        this.$createToast({type: 'error', time: 2000, txt: res.message || "获取缺货信息列表失败！"}).show();
      }
    },
    showIntro () {
      this.showIntroFlag = !this.showIntroFlag;
    },
    receive (item, index, type) {
      let str = '接收';
      if(type == 0){
        str = '拒绝';
      }

      this.$createDialog({
        type: 'confirm',
        icon: 'cubeic-warn',
        content: `是否确认${str}该项目？`,
        onConfirm: () => {
          this.receiveS(item, index, type, str);
        },
        onCancel: () => {}
      }).show()
    },
    async receiveS (item, index, type, str) {
      const zuiCubeLoading = this.$createToast({time: 0,txt: '正在加载中...'});
      zuiCubeLoading.show();
      console.info(item.id)
      let res = await zProjectdetailRec({id: item.id, status: type});
      res = this.zutil.formatAxiosData(res);


      if(res.code == '0000'){

        zuiCubeLoading.hide();
        this.$set(item, 'status', type);
        this.$createToast({type: 'correct', time: 2000, txt: res.message || `${str}该项目成功`}).show();

      }else{
        this.$createToast({type: 'error', time: 2000, txt: res.message || `${str}该项目失败`}).show();
      }
    },
    zupload (item, index) {
      this.zutil.lStorage.setParam('lst_projectBaseInfoDetail', JSON.stringify(item));
      this.$router.push(`/projectS/projectInfoS/projectdetailS/projectImgS`);
    }
  }
}
</script>

<style scoped lang="scss">

.zuipagesubWrap {
  background: #fff;
  padding-top: 10px;
  .zcontent {
    .ztableWrap {
      .J_row {
        border-bottom: 1px solid #ddd;
        &:nth-child(2n+1) {
          .J_col {
            background: #fafafa;
          }
        }
        &:nth-of-type(1) {
          border-top: 1px solid #ddd;
          .J_col {
            background: #cd6d6d;
            color: #fff;
          }
        }
        .J_col {
          height: 40px;
          line-height: 40px;
          border-right: 1px solid #ddd;
          text-align: center;
          word-break:keep-all;
          white-space:nowrap;
          overflow:hidden;
          text-overflow:ellipsis;
          &.w1 {
            width: 80px!important;
          }
          &.w2 {
            width: 150px;
          }
          &.w3 {
            width: 200px;
          }
          &.w4 {
           width: 300px;
           height:auto;
           //  white-space:normal;
          }
          .tel {
            color: #1c1cf6;
            text-decoration: underline;
          }
          .zbtn {
            display: inline-block;
            height: 30px;
            line-height: 30px;
            padding: 0 10px;
            margin: 0 5px;
            font-size: 12px;
            &.zbtn1 {
              background: #409EFF;
            }
            &.zbtn2 {
              background: #E6A23C;
            }
            &.zbtn3 {
              background: #359598;
            }
          }
        }
      }
      .J_left {
        .J_col {
          width: 100px;
        }
      }
      .J_right {
        // width: 1800px;
        .J_col {
          width: 100px;
          &:last-child {
            border-right: 0;
          }
        }
      }
    }
  }
}

.horizontal-scroll-list-wrap {
  /deep/ {
    .cube-scroll-content{
      display: inline-block;
    }
    .list-wrapper{
      padding: 0 10px;
      line-height: 60px;
      white-space: nowrap;
    }
    .list-item{
      display: inline-block;
    }
  }
}

</style>
